import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hixing_app/const/gaps.dart';

class TestBottomNav extends StatefulWidget {
  @override
  _TestBottomNavState createState() => _TestBottomNavState();
}

class _TestBottomNavState extends State<TestBottomNav> {
  bool isShowSubNav = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('创作页面'),
        ),
        body: Stack(
          children: [
            Positioned.fill(
              child: Container(
                height: 2000,
                width: double.infinity,
                color: Colors.white,
                alignment: Alignment.center,
                child: const Text(
                  "创作内容区域",
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
            Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Padding(
                      padding:
                          EdgeInsets.only(left: 20.0, right: 10, bottom: 20),
                      child: PhysicalModel(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(8),
                        elevation: 2,
                        child: Container(
                          width: 100,
                          height: 50,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Expanded(
                                child: Icon(Icons.refresh),
                              ),
                              Expanded(
                                child: Icon(Icons.refresh),
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                    _buildNav(),
                  ],
                ))
          ],
        ));
  }

  Widget _buildNav() {
    return Container(
      decoration: BoxDecoration(color: Colors.white, boxShadow: [
        BoxShadow(
            color: Colors.black38,
            offset: Offset(0, -1),
            blurRadius: 3,
            spreadRadius: 1),
      ]),
      width: double.infinity,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          AnimatedContainer(
            duration: Duration(milliseconds: 400),
            padding: EdgeInsets.only(top: 10),
            decoration: BoxDecoration(
                border: isShowSubNav
                    ? Border(bottom: BorderSide(color: Colors.grey))
                    : null),
            height: isShowSubNav ? 70 : 0,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                padding: EdgeInsets.symmetric(horizontal: 40),
                itemCount: 10,
                itemBuilder: (ctx, index) {
                  return SingleChildScrollView(
                    physics: const NeverScrollableScrollPhysics(),
                    child: Container(
                      padding: EdgeInsets.only(left: index == 0 ? 0 : 60),
                      child: Column(
                        children: [Icon(Icons.star), Gaps.vGap4, Text("星形")],
                      ),
                    ),
                  );
                }),
          ),
          Container(
            height: 70,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                padding: EdgeInsets.symmetric(horizontal: 0),
                itemCount: 10,
                itemBuilder: (ctx, index) {
                  return GestureDetector(
                    onTap: () {
                      setState(() {
                        isShowSubNav = !isShowSubNav;
                      });
                    },
                    behavior: HitTestBehavior.opaque,
                    child: Container(
                        width: 70,
                        height: 70,
                        padding: EdgeInsets.all(4),
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            gradient: index == 3
                                ? LinearGradient(
                                    begin: Alignment.topLeft,
                                    end: Alignment.bottomRight,
                                    colors: [Colors.orange, Colors.yellow])
                                : null,
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Icon(Icons.add_card_sharp),
                              Gaps.vGap4,
                              Text("图片")
                            ],
                          ),
                        )),
                  );
                }),
          ),
        ],
      ),
    );
  }
}
